<template>
    <div>
        <button @click="type='add'" :class="{active:type=='add'}">新增商品</button>
        <button @click="type='edit'" :class="{active:type=='edit'}">修改商品</button>
        <button @click="type='del'" :class="{active:type=='del'}">删除商品</button>
        <KeepAlive include="add,edit">
            <GoodsAdd v-if="type=='add'"></GoodsAdd>
            <GoodsEdit  v-if="type=='edit'"></GoodsEdit>
            <GoodsDel v-if="type=='del'"></GoodsDel>
        </KeepAlive>
        
    </div>
</template>

<script>
import GoodsAdd from "./GoodsAdd.vue"
import GoodsEdit from "./GoodsEdit.vue"
import GoodsDel from "./GoodsDel.vue"
export default {
    components:{
        GoodsAdd,
        GoodsEdit,
        GoodsDel
    },
     // 组件中的状态 必须是一个函数
   data() {
    return {
      type:'add'

    }
   }
};
</script>

<style scoped>

.active {
    background-color: red;
 }
 

</style>
